<template>
  <div>
    <!-- 品牌列表 -->
    <common-table :tableProperties="tableProperties"></common-table>

    <!-- 添加品牌 -->
    <common-dialog-form :from="addBrand"></common-dialog-form>

    <!-- 修改品牌 -->
    <common-dialog-form :from="updateBrand"></common-dialog-form>

    <!-- 关联品牌和商品分类分组 -->
    <common-dialog-form :from="relationBrandAndProduct"></common-dialog-form>
  </div>
</template>

<script>
  import CommonTableEnum from "../../../components/enum/CommonTableEnum"
  import CommonTable from '../../../components/commonTable'
  import CommonDialogForm from '../../../components/commonDialogForm'
  import CommonFormEnum from '../../../components/enum/CommonFormEnum'
  import BaseVue from '../../../components/BaseVue.vue'
  import {
    successMessage,
    successMessageBox,
    errorMessage
  } from "../../../utils/Message";
  export default {
    name: 'brandList',
    extends:BaseVue,
    components: {
      CommonTable,
      CommonDialogForm
    },
    data() {
      return {
        /* 添加品牌 */
        addBrand: {
          show: false,
          from: {
            originalData: {
              name: null,
              logo: null,
              descript: null,
              showStatus: null,
              firstLetter: null,
              sort: null,
            },
            title: '添加品牌',
            columns: [{
                label: '品牌名',
                prop: 'name',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '介绍',
                prop: 'descript',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '显示状态',
                prop: 'showStatus',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px',
                
              },
              {
                label: '检索首字母',
                prop: 'firstLetter',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '排序',
                prop: 'sort',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '品牌logo',
                prop: 'logo',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.addBrandEvent,
              text: '添加'
            }],
          }
        },
        /* 修改品牌 */
        updateBrand: {
          show: false,
          from: {
            originalData: {
              brandId: null,
              name: null,
              logo: null,
              descript: null,
              showStatus: null,
              firstLetter: null,
              sort: null,
            },
            title: '修改品牌',
            columns: [{
                label: '品牌名',
                prop: 'name',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '介绍',
                prop: 'descript',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '显示状态',
                prop: 'showStatus',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '检索首字母',
                prop: 'firstLetter',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '排序',
                prop: 'sort',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '品牌logo',
                prop: 'logo',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.uploadBrandEvent,
              text: '修改'
            }],
          }
        },
        /* 关联商品分类和品牌 */
        relationBrandAndProduct: {
          show: false,
          from: {
            originalData: {
              brandId: null,
              product: null,
              brandName:null,
            },
            title: '关联商品分类和品牌',
            columns: [{
              label: '品牌名',
              prop: 'product',
              options: [],
              type: CommonFormEnum.Cascader,
              required: true,
              labelWidth: '120px'
            }, ],
            footBut: [{
              api: this.relationBrandAndProductEvent,
              text: '修改'
            }],
          }
        },
        tableProperties: {
          tabs: {
            defaultActiveName: 0,
            tabPane: [{
              label: '所有商品',
              prop: null
            }, ]
          },
          headBut: [{
            label: '添加品牌',
            show: true,
            prop: 'but1',
            click: this.showAddBrandForm
          }],
          tableView: {
            refresh: 0,
            isPaging: true,
            api: 'product/productbrand/list',
            columns: [{
                label: '品牌名',
                type: CommonTableEnum.TEXT,
                prop: 'name',
              },
              {
                label: '品牌logo地址',
                type: CommonTableEnum.IMAGE,
                prop: 'logo',
              },
              {
                label: '介绍',
                type: CommonTableEnum.TEXT,
                prop: 'descript',

              },
              {
                label: '显示状态[0-不显示；1-显示]',
                type: CommonTableEnum.TEXT,
                prop: 'showStatus',
                 formatter: function(v) {
              return v ? "显示" : "不显示";
            }
              },
              {
                label: '检索首字母',
                type: CommonTableEnum.TEXT,
                prop: 'firstLetter',
              },
              {
                label: '排序',
                type: CommonTableEnum.TEXT,
                prop: 'sort',
              },
            ],
            footBut: [{
                label: '关联商品分类',
                icon: 'el-icon-share',
                click: (row, index) => {
                  this.getProductList()
                  this.relationBrandAndProduct.from.originalData.brandId = row.brandId;
                  this.relationBrandAndProduct.from.originalData.brandName = row.name;
                }
              },
              {
                label: '修改',
                icon: 'el-icon-plus',
                click: (row, index) => {
                  this.updateBrand.from.originalData = row;
                  this.updateBrand.show = true
                }
              },
              {
                label: '删除',
                icon: 'el-icon-delete',
                click: (row, index) => {
                  this.delBrandEvent(row)
                }
              },
            ]
          },
        }
      }
    },
    methods: {
      // 刪除品牌
      delBrandEvent(data) {
        successMessageBox({
          content: '确定要删除吗？'
        }).then(res => {
          return new Promise((resolve, reject) => {
            this.$http({
              url: this.$http.getRequest('product/productbrand/delete'),
              method: 'post',
              data: this.$http.adornData(data.brandId, false)
            }).then((data) => {
              successMessage("刪除品牌成功");
              this.tableProperties.tableView.refresh++
            }).catch(error => {
              errorMessage("刪除品牌失败")
            })
          })
        })
      },
      /* 修改品牌 */
      uploadBrandEvent(data) {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productbrand/update'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("修改品牌成功");
            this.updateBrand.show = false;
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("修改品牌失败")
          })
        })
      },
      /* 添加品牌 */
      addBrandEvent(data) {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productbrand/save'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("添加品牌成功");
            this.addBrand.show = false;
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("添加品牌失败")
          })
        })
      },


      /* 显示添加品牌弹窗 */
      showAddBrandForm() {
        this.addBrand.show = true
      },

      // 获取商品三级分类
      getProductList() {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productcategory/classification'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            let resource = data.data.data
            if (resource) {
               let props = {label:'name',value:'catId'}
              this.relationBrandAndProduct.from.columns[0].options = this.startRecursionTreeData(resource,props)
              this.relationBrandAndProduct.show = true
            }
          })
        })
      },

      //关联品牌和商品分类
      relationBrandAndProductEvent(data){
        let obj = {
          brandId:data.brandId,
          catelogId:data.product[data.product.length-1],
          brandName:data.brandName,
        }
        return new Promise((resolve, reject) => {
            this.$http({
              url: this.$http.getRequest('product/productcategorybrandrelation/save'),
              method: 'post',
              data: this.$http.adornData(obj, false)
            }).then((data) => {
              this.relationBrandAndProduct.show=false
              successMessage("关联品牌和商品分类成功");
            }).catch(error => {
              errorMessage("关联品牌和商品分类失败")
            })
          })
      },
    }

  }
</script>

<style scoped>

</style>
